<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审核</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
    <style>
        .swiper-container {
            padding: 20px;
        }

        td[data-field="imgUrl"] div,
        td[data-field="negativeImgUrl"] div {
            height: 120px;
        }

        .lay-form {
            padding: 20px;
        }
        .swiper-container {
            background-color: #fff;
        }
        .bar {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }
        .searchInput {
            display: flex;
            align-items: flex-end;
        }
        .searchInput input {
            width: 200px;
            margin-right: 20px;
        }
        .searchInput .layui-form-label {
            padding: 9px 0;
        }
        .bar .layui-form-label {
            padding: 0;
            padding-bottom: 4px;
            text-align: left;
        }
        .bar .layui-inline {
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div class="swiper-container">

        <!-- 搜索 -->
        <div class="searchInput">
            <form class="layui-form" action="" lay-filter="resets">
                <div class="layui-inline">
                    <label class="layui-form-label">客户姓名：</label>
                    <input class="layui-input" name="fullName" id="demoReload" placeholder="请输入客户姓名" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号：</label>
                    <input class="layui-input" name="userPhone" placeholder="请输入手机号" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">申请时间：</label>
                    <input type="text" class="layui-input" id="test1" name="createTime" placeholder="请输入申请时间" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">审核时间：</label>
                    <input type="text" class="layui-input" id="test2" name="checkTime" placeholder="请输入审核时间" autocomplete="off">
                </div>
                <button class="layui-btn" data-type="reload" lay-submit="" lay-filter="searchForm">搜索</button>
                <button class="layui-btn layui-btn-primary" data-type="reload" lay-submit="" lay-filter="reset">重置</button>
            </form>
        </div>
    

        <table lay-filter="authTable" class="layui-hide" id="authTable"></table>
    </div>

</body>

<!-- 添加 -->
<script type="text/html" id="toolbarDemo">
    <div class="bar">
        <div class="layui-btn-container" style="margin-bottom:-5px;">
            <button class="layui-btn layui-btn-sm" lay-event="success">批量通过</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="fail">批量驳回</button>
        </div>

        <!-- 筛选 -->
        <div class="layui-form-item" id="status" style="margin-bottom:0">
            <label class="layui-form-label" style="width: 60px; text-align:right; margin-top:10px">状态：</label>
            <div class="layui-input-block" style="margin-left: 70px">
              <select name="stop" lay-filter="select">
                <option value="">全部</option>
                <option value="0">待审核</option>
                <option value="1">已通过</option>
                <option value="2">已驳回</option>
              </select>
            </div>
        </div>
    </div>
</script>

<!-- 操作 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="ok">通过</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="returns">驳回</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
<script src="../utils.js"></script>
<script>
    layui.use(['table', 'upload', 'form', 'jquery', "laydate"], function () {
        var table = layui.table,
            upload = layui.upload,
            form = layui.form,
            laydate = layui.laydate,
            $ = layui.jquery;

        table.render({
            elem: '#authTable'
            , toolbar: "#toolbarDemo"
            , url: window.baseUrl + '/indexUser/getAuthenticateAll'
            , page: false
            , headers: {
                Authorization: localStorage.token
            }
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,parseData: function(res){ //res 即为原始返回的数据
                res.data.data.forEach(el => {
                    el.stop = el.stop == 0 ? true : false; 
                })
                return {
                    "code": 200,
                    "count": res.data.recordsTotal, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            }
            ,request: {
                pageName: 'start' //页码的参数名称，默认：page
                ,limitName: 'length' //每页数据量的参数名，默认：limit
            }
            , cols: [[
                {type: 'checkbox'}
                , { field: 'id', width: 80, title: 'ID', sort: true }
                , { field: 'fullName', title: '姓名', width: 160}
                , { field: 'username', title: '用户昵称', width: 160}
                , { field: 'userPhone', title: '用户手机号', width: 160}
                , { field: 'identificationNo', title: '身份证号', width: 180}
                , { field: 'status', title: '审核状态', width: 120, templet: function (res) {
                        return "<span>" + (res.status == 0 ? "<span style='color: #FF9900'>待审核</span>" : (res.status == 1 ? "<span style='color: #19BE6B'>审核通过</span>" : "<span style='color:red'>已驳回</span>")) + "</span>"
                }}
                , { field: 'imgUrl', title: '身份证正面', templet: function (res) {
                        return '<a href="javascript:void(0);" data-url="'+ res.imgUrl +'" class="viewImg"><img style="width:100%; height:100%; object-fit: contain; max-width:initial;" src="' + res.imgUrl + '" /></a>'
                    }
                }
                , {
                    field: 'negativeImgUrl', title: '身份证反面', templet: function (res) {
                        return '<a href="javascript:void(0);" data-url="'+ res.negativeImgUrl +'" class="viewImg"><img style="width:100%; height:100%; object-fit: contain; max-width:initial;" src="' + res.negativeImgUrl + '" /></a>'
                    }
                }
                , { field: 'checkTime', title: '审核完成日期', width: 160, templet: function (res) {
                        return "<span>" + (res.checkTime ? res.checkTime : '-') + "</span>"
                }}
                , { field: 'createTime', title: '创建日期', width: 160,  templet: function (res) {
                    return "<span>" + (res.createTime ? res.createTime : '-') + "</span>"
                }}
                , { title: '操作', toolbar: '#barDemo', width: 160 }
            ]],
            page: true
            , done: function() {
                // 放大图片
                $(".viewImg").on("click", function() {
                    let url = $(this).attr("data-url");
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['auto'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: "<img src=" + url + " />"
                    });
                })
            }
        });

        laydate.render({
            elem: '#test1'
        });

        laydate.render({
            elem: '#test2'
        });

        //工具栏事件
        table.on('toolbar(authTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'success':
                    //页面层
                    var checkStatus = table.checkStatus('authTable')
                        ,data = checkStatus.data;
                        if (!data.length) {
                            return layer.msg("请选择！")
                        }
                        data.forEach(el => {
                            el.status = 1;
                            ajax({
                                path: "/indexUser/editAuthenticate",
                                data: el, 
                                success: function (res) {
                                    table.reload("authTable");
                                }
                            }, $)
                        })

                        layer.msg("已通过！")
                    break;
                case 'fail':
                    var checkStatus = table.checkStatus('authTable')
                        ,data = checkStatus.data;
                        if (!data.length) {
                            return layer.msg("请选择！")
                        }
                        data.forEach(el => {
                            el.status = 2;
                            ajax({
                                path: "/indexUser/editAuthenticate",
                                data: el, 
                                success: function (res) {
                                    table.reload("authTable");
                                }
                            }, $)
                        })
                        
                        layer.msg("已驳回！")
                    break;
            };
        });

        // 搜索
        form.on("submit(searchForm)", function(e){
            
            
            if (e.field.createTime != "") {
                e.field.createTime = new Date(e.field.createTime)
            } else {
                delete e.field.createTime
            }

            if (e.field.checkTime != "") {
                e.field.checkTime = new Date(e.field.checkTime)
            } else {
                delete e.field.checkTime
            }

            if (!e.field.fullName) {
                delete e.field.fullName
            }

            if (!e.field.userPhone) {
                delete e.field.userPhone
            }
           
            table.reload('authTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                }
                ,where: e.field
            });

            return false;
        })


        // 搜索
        form.on("submit(reset)", function(e){
            
            table.reload('authTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                }
                ,where: null
            });

            form.val("resets", {
                fullName: "",
                userPhone: "",
                createTime: "",
                checkTime: ""
            });

            return false;
        })


         // 筛选状态
         form.on("select(select)", function(e){
            table.reload('authTable', {
                page: {
                    start: 1 //重新从第 1 页开始
                }
                ,where: {
                    status: e.value
                }
            });
            
            setTimeout(function() {
                $("#status .layui-select-title input").attr("placeholder", e.value == '0' ? "待审核" : (e.value == "1" ? "已通过" : (e.value == '2' ? "已逐回" : "全部" )))
            }, 300)
            
        })


        // 编辑和删除
        table.on("tool(authTable)", function(data) {
            switch(data.event) {
                case "ok":
                    data.data.status = 1;
                    data.data.checkTime = new Date().getTime()
                    ajax({
                        path: "/indexUser/editAuthenticate",
                        data: data.data, 
                        success: function (res) {
                            layer.msg("已通过！")
                            table.reload("authTable");
                        }
                    }, $)
                    break;
                case "returns":
                    data.data.status = 2;
                    data.data.checkTime = new Date().getTime()
                    ajax({
                        path: "/indexUser/editAuthenticate",
                        data: data.data, 
                        success: function (res) {
                            layer.msg("已驳回！")
                            table.reload("authTable");
                        }
                    }, $)
                    break;
                case "del":
                    layer.confirm('确定删除？', function(index){
                        ajax({
                            path: "/indexUser/delAuthenticate?id="+data.data.id,
                            type: "GET",
                            success: function (res) {
                                layer.msg("已删除！")
                                table.reload("authTable");
                            }
                        }, $)
                    })
                    break;
            }
        })
    });
</script>

</html>